<template>
  <div class="ShoppingCart">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="$router.push('/search')"
    >
      <template #right>
        <i class="iconfont icon-sousuo"></i>
      </template>
    </van-nav-bar>
    <div class="vacancy" v-if="!items.length">
      <div><span>购物车还是空的</span><em> 去逛逛</em></div>
    </div>
    <div class="shoppingCart_items">
      <ul>
        <li v-for="(item, index) of items" :key="index">
          <div class="item">
            <div
              class="checked"
              @click="change({ id: item.product_id, type: 'checked' })"
            >
              <i
                :class="[
                  'iconfont',
                  [
                    item.checked
                      ? 'icon-fangxingxuanzhongfill'
                      : 'icon-fangxingweixuanzhong',
                  ],
                ]"
              ></i>
            </div>
            <div class="item_img">
              <img :src="item.image_url" />
            </div>
            <div class="item_info">
              <div class="item-text">
                <div class="name">
                  {{ item.product_name }} {{ item.spec_value }}
                </div>
              </div>
              <div class="item_price">
                <span>售价:</span
                ><span class="mr-10">{{ item.market_price }}元</span>
              </div>
              <div class="num">
                <van-stepper
                  v-model="item.num"
                  disable-input
                  @plus="change({ id: item.product_id, type: 'add' })"
                  @minus="change({ id: item.product_id, type: 'rde' })"
                />
                <i
                  class="iconfont icon-shanchu"
                  @click="change({ id: item.product_id, type: 'del' })"
                ></i>
              </div>
            </div>
          </div>
          <div style="border-bottom: 0.2rem solid #f5f5f5"></div>
        </li>
      </ul>
    </div>
    <div class="head_mark">
      <img
        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f00943bf04702405b8e8bc9f404a9f6.png"
        alt=""
      />
    </div>
    <div class="recommend_lists">
      <div
        class="recommend_list"
        v-for="(item, index) of recommend"
        :key="index"
        @click="$router.push('/details')"
      >
        <div class="list_img">
          <img :src="'https:' + item.image_url" />
        </div>
        <div class="list_info">
          <div class="list_name">{{ item.name }}</div>
          <div class="list_price price">
            ￥{{ item.price
            }}<del class="price" v-if="item.market_price !== item.price"
              >￥{{ item.market_price }}</del
            >
          </div>
        </div>
      </div>
    </div>
    <transition name="van-slide-up">
      <van-submit-bar
        :price="totalPrice * 100"
        button-text="去结算"
        @submit="$router.push('/payment')"
        v-show="totalPrice"
      >
        <van-checkbox
          v-model="checkedAll"
          shape="square"
          checked-color="#ff6700"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </transition>
    <van-tabbar v-model="navActive" @change="onChange">
      <van-tabbar-item v-for="item of icon" :key="item.id">
        <span>{{ item.name }}</span>
        <template #icon="props">
          <i
            :class="['iconfont', props.active ? item.active : item.inactive]"
          />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <div style="height: 100px"></div>
  </div>
</template>
<script>
import { recommend } from "../assets/js/shuju.js";
import { mapActions, mapGetters, mapState } from "vuex";
import Vue from "vue";
import {
  NavBar,
  Tabbar,
  TabbarItem,
  SubmitBar,
  Checkbox,
  CheckboxGroup,
  Stepper,
} from "vant";
Vue.use(Stepper);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(NavBar);
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(SubmitBar);
export default {
  name: "ShoppingCart",
  data() {
    return {
      recommend: null,
      navActive: 2,
      checked: false,
      value: 1,
      icon: [
        {
          id: 1002,
          name: "首页",
          active: "icon-shouyefill",
          inactive: "icon-shouye",
        },
        {
          id: 1003,
          name: "分类",
          active: "icon-sousuoleimufill",
          inactive: "icon-sousuoleimu",
        },
        {
          id: 1004,
          name: "购物车",
          active: "icon-gouwuchefill",
          inactive: "icon-gouwuche",
        },
        {
          id: 1005,
          name: "我的",
          active: "icon-wodefill",
          inactive: "icon-wode",
        },
      ],
    };
  },
  methods: {
    onChange() {
      let active = this.navActive;
      active == 0
        ? this.$router.push("/Home")
        : active == 1
        ? this.$router.push("/classification")
        : active == 2
        ? this.$router.push("/ShoppingCart")
        : active == 3
        ? this.$router.push("/My")
        : null;
    },
    onSubmit() {
      console.log(1);
    },
    ...mapActions({
      change: "change",
    }),
  },
  created() {
    this.recommend = recommend;
  },
  computed: {
    ...mapState(["items"]),
    ...mapGetters(["totalPrice"]),
    checkedAll: {
      get() {
        return this.items.every((ele) => ele.checked);
      },
      set(newValue) {
        this.change({ newValue, type: "allChecked" });
      },
    },
  },
  beforeRouteEnter(to, from, next) {
    !window.sessionStorage.getItem("token") ? next("/login") : next();
  },
};
</script>

<style lang="less" >
.ShoppingCart {
  .shoppingCart_items {
    & > ul {
      & > li {
        .item {
          width: 100%;
          display: flex;
          padding: 0.24rem 0;
          .checked {
            display: flex;
            width: 10%;
            flex: 0 0 10%;
            text-align: center;
            flex-direction: column;
            justify-content: center;
            .icon-fangxingxuanzhongfill {
              font-weight: 500;
            }
            .icon-fangxingxuanzhongfill {
              color: #ff6700;
            }
            i {
              font-size: 0.4rem;
            }
          }
          .item_img {
            width: 25%;
            flex: 0 0 25%;
            margin-right: 20px;
            img {
              width: 100%;
              border: 1px solid #eee;
            }
          }
          .item_info {
            flex: 1 1;
            width: 4.6rem;
            text-align: left;
            .item-text {
              font-size: 0.28rem;
              line-height: 0.32rem;
              color: #666;
              margin: 0.12rem 0.3rem 0.12rem 0;
              padding: 0;
              -webkit-box-align: start;
              align-items: flex-start;
            }
            .item_price {
              padding: 0.12rem 0;
              font-size: 0.24rem;
              color: #999;
              margin-bottom: 0.12rem;
            }
            .num {
              font-size: 0.3rem;
              display: flex;
              justify-content: space-between;
              i {
                font-size: 0.5rem;
                color: #888888;
                float: right;
                margin-right: 0.2rem;
              }
            }
          }
        }
      }
    }
  }
  .van-submit-bar {
    bottom: 50px;
    border-bottom: 2px solid #eee;
    border-top: 2px solid #eee;
    z-index: 80;
  }
  .recommend_lists {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .recommend_list {
      flex: 0 0 49.5%;
      width: 49.5%;
      .list_img {
        width: 100%;
        img {
          width: 100%;
        }
      }
      .list_info {
        padding: 0.18rem 0.26rem 0.22rem;
        .list_name {
          font-size: 0.28rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .list_price {
          font-size: 0.32rem;
          color: #ff6700;
          margin-top: 0.1rem;
          del {
            font-size: 0.22rem;
            margin-left: 0.1rem;
            color: rgba(0, 0, 0, 0.54);
            text-decoration: line-through;
          }
        }
        .price {
          position: relative;
          padding-left: 0.5em;
          line-height: 1em;
        }
      }
    }
  }
  .head_mark {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .van-nav-bar {
    background-color: rgb(242, 242, 242);
    position: sticky;
    top: 0;
    .van-nav-bar__left {
      .van-icon,
      .van-nav-bar__text {
        font-size: 16px;
        line-height: 46px;
        color: #8a8a8a;
      }
    }
  }
  .vacancy {
    background: #ebebeb;
    padding: 0.2rem;
    div {
      font-size: 0.24rem;
      text-decoration: none;
      text-align: center;
      span {
        display: inline-block;
        line-height: 0.8rem;
        background: url(https://m.mi.com/static/img/cartnull.daaf7926f8.png)
          no-repeat 0;
        background-size: auto 100%;
        padding: 0 0.16rem 0 0.96rem;
        color: rgba(0, 0, 0, 0.27);
      }
      em {
        display: inline-block;
        border: 1px solid rgba(0, 0, 0, 0.15);
        box-sizing: border-box;
        height: 0.5rem;
        line-height: 0.5rem;
        padding: 0 0.24rem;
        color: rgba(0, 0, 0, 0.87);
        font-style: normal;
      }
    }
  }
  .van-tabbar--fixed {
    box-shadow: 0 5px 10px 2px rgb(0 0 0);
    z-index: 88;
    .van-tabbar-item {
      i {
        font-size: 21px;
      }
    }
  }
  .van-tabbar-item--active {
    color: #ff6700;
    background-color: #fff;
  }
}
</style>